<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>


  <link rel="shortcut icon" href="img/icon/favicon.ico">

  <link href="../css/bootstrap.css" rel="stylesheet">
  <link href="../css/style.css" rel="stylesheet">
  <link href="../css/colorbox.css" rel="stylesheet">



<!-- CONTENIDO START -->
<s:form id="producto">
	<s:hidden id="producto_Id" name="producto_Id"/>
  	<s:hidden id="atributoid" name="atributoid" />
  	<s:hidden id="valorid" name="valorid" />
  	<s:hidden id="tiendaId" name="tiendaId" />
  	<s:hidden id="categoriaid" name="categoriaid" />
  	<s:hidden id="subcategoriaid" name="subcategoriaid" />

    <div id="contenido">

        <div class="fila">
          <div class="contenido_borde_izq">
          <div class="contenido_borde_der">
            <div class="columna_derecha">

                <h2><s:property value="tiendavo.nombre" /></h2>

              <!--tienda-->
              <div class="tienda">
                <div class="tienda_articulo">
                  <div class="art_galeria">
                    <p class="product-image product-image-zoom">
                     <a href="../<s:property value="imgvo.img" />" class="target main-prod-img product-gallery">
                      
                     	<img id="target" src="<s:url value="%{getText('imagenes.display.path')}"/><s:property value='imgvo.img' />" alt="sandaia" />
                     </a>
                    </p>
                    <ul id="thumbs">
                    <s:iterator value="listadoimagenes" >
                      	<li><a href="../<s:property value="img" />" class="product-gallery prod-more-view">
                      			<img src="<s:url value="%{getText('imagenes.display.path')}"/><s:property value='img'/>" alt="sandaia" />
                      		</a>
                      	</li>
                     </s:iterator>
                    </ul>
                  </div>

                  <div class="art_datos">
                    <div class="art_nombre"><s:property value="productovo.nombre" /></div>
                    <div class="art_desc">
                    	<s:property value="productovo.descripcion" />
                    </div>
                    <div class="art_opcion">ESCOGE UNA OPCIÓN<br/>
                      <table>
	                    <tr>
	                    <td>
	                    	<label for="alimentacion"><span></span><s:property value='atributovo.nombre' /> :</label>
	                    </td>
	                    <td>
	                    	 <s:if test="#listadoAtributo!=null || #listadoAtributo.size>0">
		                          
	                     				<select class="form-control" name="atributoValor">
		                        	 		<option value="0">...</option>
		                        	 	</select>
		                          
	                        </s:if>
	                        <s:else>
	                        	  <select class="form-control" name="atributoValor" id="atributoValor" onchange="javascript:articuloId( )">
	                        	  	 <option value="0"> Seleccionar</option>
			                         <s:iterator value="listadovalor" >
			                         	 <option value="<s:property value="id" />_<s:property value='atributovo.id' />_<s:property value='unidades' />">  <s:property value="nombre" /></option>
			                         </s:iterator>
		                         </select>
	                        </s:else>
	                    </td>
                    </tr>
                    
                    </table>
                    
                    <p></p>
                       
                	<table>
                		<tr>
                			<td>
                				<label for="alimentacion"><span></span>UNIDADES:</label>
	                   		</td>
                		
                			<td>
                				<select class="form-control" id='unidades' name="unidades"' disabled>
            						<option value='0'>Selecciona una opcion</option>
        						</select>
                			</td>
                		</tr>
                	</table>
                    </div>
                    <div class="art_botones">
                      	<a href="javascript:carrito(<s:property value="productovo.id" />);" class="add_carrito">AÑADIR AL CARRITO</a>
                     	<a href="javascript:compraDirecta(<s:property value="productovo.id" />);" class="compra_directa">COMPRA DIRECTA</a>
                    </div>
                  </div>

                </div>

                <a href="javascript:volver()" class="volver">&laquo; VOLVER</a>
              </div>
              <!--tienda-->
            </div>
          </div>
          </div>
            <div class="contenido_borde_abajo">
              <div class="esquina_izq"></div>
              <div class="esquina_der"></div>
            </div>
        </div>

        <div class="columna_izquierda">
          <div class="pestania">
            <div class="pestania_top"></div>
            <s:a action="Inicio" title="Volver a la Home"><span class="bigger" >VOLVER</span> A LA HOME</s:a>
            <div class="pestania_bottom"></div>
          </div>
        </div>
    </div>
</s:form>
    <!-- CONTENIDO END -->

  
 <!-- CONTENIDO START -->
 <%-- <s:form id="producto">
 
  	<s:hidden id="producto_Id" name="producto_Id"/>
  	<s:hidden id="atributoid" name="atributoid" />
  	<s:hidden id="valorid" name="valorid" />
  	<s:hidden id="tiendaId" name="tiendaId" />
  	<s:hidden id="categoriaid" name="categoriaid" />
  	<s:hidden id="subcategoriaid" name="subcategoriaid" />
  	
  	
    <div id="contenido">

        <div class="fila">
          <div class="contenido_borde_izq">
          <div class="contenido_borde_der">
            <div class="columna_derecha">

                <h2>SHOE'S CASTELLANA 36</h2>

               <!--tienda-->
              <div class="tienda">
                <div class="tienda_articulo">
                  <div class="art_galeria">
                  
                  
                  	
                  	
                  
                  
                    <p class="product-image product-image-zoom">
                     <a href="../<s:property value="imgvo.img" />" class="target main-prod-img product-gallery"><img id="target" src="../<s:property value="imgvo.img" />" alt="sandaia" /></a>
                    </p>
                    <ul id="thumbs">
                    <s:iterator value="listadoimagenes" >
                      	<li><a href="../<s:property value="img" />" class="product-gallery prod-more-view"><img src="../<s:property value="img" />" alt="sandaia" /></a></li>
                     </s:iterator>
                    </ul>
                  </div>

                  <div class="art_datos">
                    <div class="art_nombre"><s:property value="productovo.nombre" /></div>
                    <div class="art_desc">
                    	<s:property value="productovo.descripcion" />
                    </div>
                    <div class="art_opcion">ESCOGE UNA OPCIÓN<br/>
                    <table>
	                    <tr>
	                    <td>
	                    	<label for="alimentacion"><span></span><s:property value='atributovo.nombre' /> :</label>
	                    </td>
	                    <td>
	                    	 <s:if test="#listadoAtributo!=null || #listadoAtributo.size>0">
		                          
	                     				<select class="form-control" name="atributoValor">
		                        	 		<option value="0">...</option>
		                        	 	</select>
		                          
	                        </s:if>
	                        <s:else>
	                        	  <select class="form-control" name="atributoValor" id="atributoValor" onchange="javascript:articuloId( )">
	                        	  	 <option value="0"> Seleccionar</option>
			                         <s:iterator value="listadovalor" >
			                         	 <option value="<s:property value="id" />_<s:property value='atributovo.id' />_<s:property value='unidades' />">  <s:property value="nombre" /></option>
			                         </s:iterator>
		                         </select>
	                        </s:else>
	                    </td>
                    </tr>
                    
                    </table>
                    
                    <p></p>
                       
                	<table>
                		<tr>
                			<td>
                				<label for="alimentacion"><span></span>UNIDADES:</label>
	                   		</td>
                		
                			<td>
                				<select class="form-control" id='unidades' name="unidades"' disabled>
            						<option value='0'>Selecciona una opcion</option>
        						</select>
                			</td>
                		</tr>
                	</table>	        
                         <br><br/>
                   
                    
                        	   
	                    
		             </div>
		             
		             
                     <div class="art_botones">
                     	<a href="javascript:carrito(<s:property value="productovo.id" />);" class="add_carrito">AÑADIR AL CARRITO</a>
                     	<a href="javascript:compraDirecta(<s:property value="productovo.id" />);" class="compra_directa">COMPRA DIRECTA</a>
                     	<a href="javascript:volver()" class="volver">&laquo; VOLVER</a>
                    </div>

                </div>

                
              </div>
              
          
              <!--tienda-->
            </div>
          </div>
          </div>
            <div class="contenido_borde_abajo">
              <div class="esquina_izq"></div>
              <div class="esquina_der"></div>
            </div>
        </div>

        <div class="columna_izquierda">
		  <div class="pestania">
		    <div class="pestania_top"></div>
		    <s:a action="Inicio" title="Volver a la Home"><span class="bigger" >VOLVER</span> A LA HOME</s:a>
		
		
		    <div class="pestania_bottom"></div>
		  </div>
		</div>
    </div>
    </div>
</s:form> --%>
    <!-- CONTENIDO END -->
<script src="../js/livevalidation.js"></script>
  <script type="text/javascript">
  
  function articuloId(){

	  var variable = document.producto.atributoValor.value;
	  variable = variable.split("_");
	  
	  document.producto.valorid.value=variable[0];
	  document.producto.atributoid.value=variable[1];
	  
	  var unidades=variable[2];
	  
	 
      if(variable==0)
      {
          // desactivamos el segundo select
          document.getElementById("unidades").disabled=true;
      }else{
          // eliminamos todos los posibles valores que contenga el select2
          document.getElementById("unidades").options.length=0;
          
          // añadimos los nuevos valores al select2
          document.getElementById("unidades").options[0]=new Option("Selecciona una opcion", "0");
          for(var i=1;i<=unidades;i++)
          {
           
                  document.getElementById("unidades").options[document.getElementById("unidades").options.length]=new Option(i,i);
              
          }
          
          // habilitamos el segundo select
          document.getElementById("unidades").disabled=false;
      }
	  

	  
  }
  
  function carrito(productoid){
	   var atributo=document.producto.atributoValor.value;
	   var unidades =document.producto.unidades.value;
	   var atributos = new LiveValidation('atributoValor');
		//  atributos.add(Validate.Exclusion, { within: ['Please select'], failureMessage: "Please select something!"});
	  if((atributo==0)|| unidades==0){
		 alert('Escoga una opción o unidades');
	  }else{
		  document.producto.action="Carrito";
	      document.producto.submit();
		  
	  }
		 
	 
	  
  }

  function compraDirecta(productoid){
	  
	  if((document.producto.atributoValor.value==0)|| document.producto.unidades.value==0){
		  alert('Escoga una opción o unidades');
	  }else{
		  document.producto.action="PagoSeleccionCompraDirecta";
	      document.producto.submit();
	      
	  }
	  
  }
  
  function volver(){
		
	  document.producto.action="ResultadoBusquedaCategoria";
      document.producto.submit();
}
  
  
 
  
  </script>	
	
  <script src="../js/jquery.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <script src="../js/jquery.colorbox-min.js"></script>
  <script src="../js/galeria.js"></script>

<script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.src=(("http:"===document.location.protocol)?"http:":"https:")+"//"+"js-agent.newrelic.com/nr-100.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrfj","beacon-2.newrelic.com","a2cef8c3d3","1841284","Z11RZxdWW0cEVkYLDV4XdUYLVEFdClsdAAtEWkZQDlJBGgRFQhFMWFdARwBTG0IMUEURWENdQUUA",0,10501,new Date().getTime(),"","","","",""]);</script></body>
